<template>
	<view>
		<official-account></official-account>
		<u-toast show="true" ref="payToast"></u-toast>
		<u-loading-page :loading="show" bgColor="#ffffff94;" loadingColor="#3996e6;" color="#3996e6;"
			:loadingText="loadingText" fontSize="30rpx"></u-loading-page>
		<view class='box'>
			<view>
				<u-toast ref="uToast" show="true" />
			</view>
			<view class="back"></view>
			<view class="topName pad">
				<view style="background-color: #fff;padding: 10rpx;border-radius: 25rpx;">
					<u--image :src="imgApi+params.storeAvatar" width="100rpx" height="100rpx"></u--image>
				</view>
				<view class="name" v-if="online" style="margin-right: auto;margin-left: 25rpx;">欢迎回来, <text
						class="nameBold"> {{params.name}}</text></view>
				<view class="name" v-else>请重新登录再试</view>

				<view @click="goMsg()">

					<uni-icons type="chatbubble" size="30" color="#fff"></uni-icons>

				</view>
			</view>
			<view class="cont pad">
				<view class="balance boxCont">
					<text class="iconfont icon-qian"></text>
					<view class="tit">
						<view class="tip">我的余额(不含保证金)</view>
						<view class="num">{{params.balance}}￥</view>
					</view>
					<!-- 暂时注释提现功能 -->
					<!-- <view class="deposit" @click="goPage('前往提现')">前往提现</view> -->
				</view>

				<!-- 暂时注释成交金额展现 -->
				<!-- <view class="middleNum">
					<view class="order boxCont" style="margin-right: 40rpx;">
						<text class="iconfont icon-guoshu" style="right: -7%; top: -16%;"></text>
						<view class="tit">
							<view class="tip">果蔬订单成交金额</view>
							<view class="num">{{params.fruitsOrder}}</view>
						</view>
					</view>
					<view class="order boxCont">
						<text class="iconfont icon-shangpin" style="font-size: 110rpx;"></text>
						<view class="tit">
							<view class="tip">拼团订单成交金额</view>
							<view class="num">{{params.goodsOrder}}</view>
						</view>
					</view>
				</view>
 -->
				<view class="bottomCont" @click="goPage('商家中心')">
					<view class="tit  ">
						<text class="iconfont icon-dianpufill" style="color: #027AEF;"></text>
						商家中心</text>
					</view>
					<text class="iconfont icon-xiangyou1"></text>
				</view> 
				<view class="bottomCont" @click="goPage('扫码核销')">
					<view class="tit  ">
						<text class="iconfont icon-saoyisao_1"></text>
						扫码核销
					</view>
					<text class="iconfont icon-xiangyou1"></text>
				</view>
				<view class="bottomCont" @click="goPage('缴纳保证金')" v-if="hasMargin">
					<view class="tit  ">
						<text class="iconfont icon-chongzhi"></text>
						缴纳保证金
					</view>
					<text class="iconfont icon-xiangyou1"></text>
				</view>
				<view class="bottomCont" @click="goPage('消息通知')" style="position: relative;">
					<view style="position: absolute;bottom: 64rpx;left: 64rpx">
						<u-badge type="error" max="99" :value="params.messageCount" shape="horn">
						</u-badge>
					</view>
					<view class="tit  ">
						<text class="iconfont icon-xiaoxi1" style="color: #22a6b3;"></text>
						消息通知
					</view>
					<text class="iconfont icon-xiangyou1"></text>
				</view>
				<view class="bottomCont" @click="goPage('收支明细')">
					<view class="tit  ">
						<text class="iconfont icon-shouzhimingxi"></text>
						收支明细
					</view>
					<text class="iconfont icon-xiangyou1"></text>
				</view>
				<view class="bottomCont" @click="goPage('修改商家信息')">
					<view class="tit  ">
						<text class="iconfont icon-zhanghu" style="color: #a29bfe"></text>
						修改商家信息
					</view>
					<text class="iconfont icon-xiangyou1"></text>
				</view>
				<view class="bottomCont" @click="goPage('关注公众号')">
					<view class="tit  ">
						<text class="iconfont icon-heh1" style="color: #fe078b"></text>
						关注公众号(可接收新订单通知)
					</view>
					<text class="iconfont icon-xiangyou1"></text>
				</view>
				



				<button type="default" size="mini" class="loginOut " @click="loginOut('退出登录')">退 出 登 录</button>
			</view>
			<view style="display: flex;">
				<view style="margin: auto;margin-top: 25rpx;">
					<text style="font-size: 20rpx;color: #9e9e9e;"
						user-select="true">更多操作请前往电脑端商家后台查看:https://www.tdtye.com/merchant</text>
				</view>
			</view>

			<!-- 缴纳保证金模态框 -->
			<u-modal :show="marginShow" title="缴纳保证金" showCancelButton @cancel="marginShow=false" @confirm="wechatPay()">
				<view class="slot-content">
					<rich-text v-html="getContent()"></rich-text>
				</view>
			</u-modal>

			<!-- 修改商家信息模态框 -->
			<u-modal :show="infoShow" title="修改商家信息" showCancelButton @cancel="infoShow=false" @confirm="updateInfo()">
				<view class="slot-content">
					<u--form labelPosition="left" :model="form" :rules="rules" ref="form">
						<u-form-item label="店铺头像" prop="avatar" borderBottom>
							<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="1"
								:maxCount="1"></u-upload>
						</u-form-item>
						<u-form-item label="店铺名称" prop="name" borderBottom>
							<u--input placeholder="请输入店铺名称" border="surround" v-model="form.name">
							</u--input>
						</u-form-item>
					</u--form>
				</view>
			</u-modal>
		</view>
	</view>
</template>

<script>
	import {
		pathToBase64
	} from "@/js_sdk/mmmm-image-tools/index";
	export default {
		data() {
			return {
				fileList: [],
				form: {
					avatar: "",
					name: ""
				},
				rules: {},
				infoShow: false,
				imgApi: "",
				loadingText: "",
				payResult: false,
				payShow: false,
				marginShow: false,
				show: false,
				online: false,
				params: {
					name: "哇哈哈",
					balance: 0, //余额
					fruitsOrder: 0, //果蔬订单
					goodsOrder: 0, //商品订单
					messageCount: 0, //消息数量
					storeName: "",
					storeAvatar: ""
				},
				hasMargin: false,
				// 商家token
				token: '',
				contentType: "",
				phone: '',
				marginContent: "请先缴纳1000元的保证金以开通平台的团购商品相关功能，用以保障用户的售后安全（<font style='color: green;'>土地摘种相关功能可免费使用，无需缴纳<font/>）" +
					"<br/><br/><font style='color: red;'>注意：请保证当前登录的商家账号和该微信用户是绑定关系(即商家入驻的时候是以当前微信号入驻的)，否则会支付失败</font>"
			}
		},
		onShow() {
			this.getInfo()
		},
		onLoad() {
			this.contentType = this.$reqConfig.CONTENTTYPE + ";+charset=UTF-8"
			this.imgApi = this.$reqConfig.URLIMAGE
			this.token = uni.getStorageSync("merchantsToken").token
			this.phone = uni.getStorageSync("merchantsToken").phone
			if (this.token) {
				this.getName(this.token)
			}

		},
		methods: {
			updateInfo() {
				this.$axios({
					url: `us/merchantOperation/updateInfo`,
					method: "post",
					header: {
						"Authorization": this.token,
						"Content-type": this.contentType,
						"type": "merchantsToken"
					},
					data: {
						...this.form
					}
				}).then((res) => {
					this.infoShow = false
					this.getInfo()
					this.getName(this.token)
				})
			},
			afterRead(e) {
				this.fileList.push({
					url: e.file.url
				})
				pathToBase64(e.file.url).then(res => {
					this.form.avatar = res
				});
			},
			//删除图片回调
			deletePic(e) {
				this.fileList.splice(e.index, 1)
				this.form.avatar = "";
			},
			getContent() {
				return this.marginContent
			},
			// 消息列表
			goMsg() {
				uni.navigateTo({
					url: '../pages/HM-chat/userChat'
				})
			},

			// 获取商家信息
			getInfo() {
				this.$axios({
					url: `us/merchantOperation/getInfo`,
					method: "post",
					header: {
						"Authorization": this.token,
						"Content-type": this.contentType,
						"type": "merchantsToken"
					},
					data: {}
				}).then((res) => {
					//未完善土地信息去完善土地信息
					if (this.$comm.checkNull(res.result.plot)) {
						if (res.result.plot.status == 0) {
							uni.navigateTo({
								url: "./areaManage/plotDetail?id=" + res.result.plot.id
							})
						}
					}
					if (res.result.hasMargin == -1) {
						this.hasMargin = false
					} else {
						this.hasMargin = true
					}
					this.params = {
						...this.params,
						balance: res.result.balance,
						messageCount: res.result.messageCount,
					}
				})
			},

			// 获取商家名称
			getName(token) {
				this.$axios({
					url: `merchant/merchantInfo/getName`,
					method: "post",
					header: {
						"Authorization": this.token,
						"Content-type": this.contentType
					},
					data: {}
				}).then((res) => {
					this.online = true
					this.params.name = res.result.name
					this.params.storeAvatar = res.result.storeAvatar
					this.params.storeName = res.result.storeName
				})
			},

			// 退出登录
			loginOut(e) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确认注销吗？',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.setStorageSync("merchantsToken", {
								phone: that.phone
							})
							uni.switchTab({
								url: "/pages/mine/mineInfo"
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},

			goPage(e) {
				if (e == '扫码核销') {
					this.richScan()
				} else if (e == '订单列表') {
					uni.navigateTo({
						url: "./pickList"
					})
				} else if (e == "缴纳保证金") {
					//暂时弹框，后续要加
					this.marginShow = true
				} else if (e == "商家中心") {
					uni.navigateTo({
						url: './menu'
					})
				} else if (e == "收支明细") {
					uni.navigateTo({
						url: "./incomeExpenses"
					})
				} else if (e == "消息通知") {
					console.log("123: ", 123);
					uni.navigateTo({
						url: "./message/messageList"
					})
				} else if (e == "修改商家信息") {
					this.fileList = []
					if (this.form.avatar.indexOf(this.imgApi) == -1) {
						this.fileList.push({
							url: this.imgApi + this.params.storeAvatar
						})
					} else {
						this.fileList.push({
							url: this.params.storeAvatar
						})
					}
					this.form.name = this.params.storeName
					this.infoShow = true
				} else if(e == "关注公众号"){
					uni.redirectTo({
						// 此处的链接为小程序上面新建的webview页面路径，参数url为要跳转外链的地址
						url: "/pageA/gzGzh/goGzh"
					});
				}
			},
			// 扫码核销
			richScan() {
				let that = this
				uni.scanCode({
					scanType: ["qrCode"],
					success(res) {
						console.log("扫码成功: ", res);
						that.loadingText = "核销中......"
						that.show = true
						that.$axios({
							url: `us/merchantOperation/scanQRCodes`,
							method: "post",
							header: {
								"Authorization": that.token,
								"Content-type": that.contentType,
								"type": "merchantsToken"
							},
							data: {
								"codeSign": res.result,
							}
						}).then((res) => {
							if (res.code == 0) {
								that.$refs.uToast.show({
									message: "拼团订单核销成功",
									type: "success",
									duration: 2000
								})
							}
							that.show = false
						})
					},
					fail(err) {
						console.log("扫码失败: ", err);
					}
				})
			},
			//微信缴纳保证金
			wechatPay() {
				console.log("微信支付")
				this.$axios({
					url: "wx/pay/createJsApiOrder",
					method: "post",
					data: {
						orderNum: 11 + ":" + uni.getStorageSync("usId"),
						type: 4
					},
					header: {
						"Authorization": this.token,
						"Content-type": this.contentType,
						"type": "merchantsToken"
					}
				}).then((response) => {
					let that = this
					console.log('res', response)
					this.show = true
					this.loadingText = "支付中......"
					if (response.code == 0) {
						uni.requestPayment({
							provider: 'wxpay', //支付类型-固定值
							timeStamp: response.result.timeStamp, // 时间戳（单位：秒）
							nonceStr: response.result.nonceStr, // 随机字符串
							package: response.result.packageValue, // 固定值
							signType: response.result.signType, //固定值
							paySign: response.result.paySign, //签名
							success: function(response) {
								that.$refs.payToast.show({
									message: "保证金缴纳成功！您现在可操作团购模块",
									type: "success",
								})
							},
							fail: function(err) {
								console.log(err)
								that.$refs.payToast.show({
									message: "保证金缴纳失败",
									type: "error",
								})
							},
							complete: function() {

							}
						});
					}
					this.show = false
					this.marginShow = false
				})
			}
		},
	}
</script>

<style lang='scss' scoped>
	.pad {
		padding: 0 40rpx;
	}

	.box {
		height: 100vh;
	}

	.back {
		position: absolute;
		height: 20%;
		background-color: #3994ff;
		width: 100%;
	}

	.color {
		color: $theme-buy-color;
		font-size: 25rpx;
		margin-left: 10rpx;
	}

	.cont {
		position: relative;
		margin-top: 50rpx;

		.boxCont {
			background-color: #fff;
			min-height: 100rpx;
			padding: 30rpx;
			border-radius: 20rpx;
			/* box-shadow: 0 2rpx 10rpx #999; */
			overflow: hidden;
			position: relative;
			margin-bottom: 30rpx;

			.iconfont {
				font-size: 130rpx;
				opacity: .2;
				color: #3994ff;
				position: absolute;
				right: -2%;
				top: -10%;
			}

			.icon-dianpufill {
				right: -7%;
			}

			.icon-dingdan {
				font-size: 120rpx;
				right: -5%;
			}

			.icon-qian {
				font-size: 110rpx;
			}

			.tip {
				color: #b3b3b3;
				font-size: 28rpx;
			}

			.num {
				font-size: 60rpx;
				font-family: fangsong;
			}
		}

		.bottomCont {
			padding: 30rpx;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-radius: 20rpx;
			margin-bottom: 30rpx;
		}
	}

	.topName {
		padding-top: 40rpx;
		color: #fff;
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;


		.name {
			font-size: 35rpx;

			.nameBold {
				margin-left: 10rpx;
			}
		}
	}

	.loginOut {
		background-color: #fff;
		padding: 15rpx;
		width: 100%;
		margin: 0 auto;
		border: none;
		outline: none;
		color: #fff;

		background-color: $theme-buy-color;
	}

	.balance {

		.deposit {
			background-color: #3994ff;
			color: #fff;
			padding: 10rpx 20rpx;
			position: absolute;
			right: 0;
			bottom: 0;
			font-size: 28rpx;
			border-radius: 20rpx 0 0 0;
		}

	}

	.middleNum {
		display: flex;
		justify-content: space-between;

		.order {
			flex: 1;

		}
	}

	.iconfont {
		margin-right: 10rpx;
	}

	.icon-dingdan {
		color: #007AFF;
	}

	.icon-saoyisao_1 {
		color: #2DBB5B;
	}

	.icon-chongzhi {
		color: #F3A73F;
	}

	.icon-shouzhimingxi {
		color: #F77E81;
	}
</style>
